<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>聊天窗口</title>
</head>
<style>
    #content_body{
        margin: 0px auto;
        width: 50%;
        height: 500px;
        border: 1px solid black;
    }
    #content{
        width: 100%;
        height: 80%;
        overflow:auto;
    }
    #input_str{
        width: 100%;
        height: 20%;
        border: 1px solid black;
    }
    .content_right{
        text-align: right;
    }
    .content_left,.content_right{
        width: 100%;
    }

</style>
<body>
    <div id="content_body">
        <div id="content">

        </div>
        <input type="text" id="input_str"/>
    </div>
</body>
<script th:src="@{/jquery-1.12.4.js}"></script>
<script>
    $(document).keyup(function(event){
        var str = $("#input_str").val().trim();
        if(event.keyCode ==13){
            if(str == ""){
                alert("请输入内容!");
            }else{
                $.ajax({
                    url:"/chat",
                    data:{content:str},
                    success:function (res) {
                        var c = $("#content");
                        var scrollHeight = c.prop("scrollHeight");
                        c.append("<p class='content_right'>"+str+"</p>");
                        c.append("<p class='content_left'>"+res+"</p>");
                        $("#input_str").val("");
                        c.scrollTop(scrollHeight,200);
                    }
                });

            }
        }
    });
</script>
</html>